
<!doctype html>
<html lang="en" data-theme="system"> 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple, lightweight, and flexible note-taking template for Eleventy.">
    <title>GitHub Pages</title>
    <meta name="generator" content="Eleventy v3.1.2">
    <link rel="stylesheet" href="/mcp-hko/app.css">
  </head>
  <body>
    <script>document.documentElement.setAttribute("data-theme", /"(\w+)"+/.exec(localStorage.getItem("theme"))?.[1] || "system")</script>
    <script>document.documentElement.classList.add("supports-js")</script>
    <a href="#app-content" class="skip-link" lang="en">
  Skip to content
</a>


    <div class="app-layout">
      

<header class="app-header" x-data="" x-bind="WindowScroll">
  <div class="hide-xl">
  <button class="icon-btn" :aria-expanded="$store.nav.open" @click="$store.nav.toggle()" x-cloak="" lang="en">
    <span x-show="!$store.nav.open"><svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg></span>
    <span x-show="$store.nav.open"><svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span>
    <span class="visually-hidden">Menu</span>
  </button>
</div>


  <a href="/mcp-hko/" class="app-header__title">
    Eleventy Notes
  </a>

  <div class="app-header__search show-md">
    
  
  

  

  <div x-cloak="" x-data="search" @click.away="open = false" class="search" data-mode="overlay">
    <div class="search__bar">
      <span class="search__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
      <input data-kbd-trigger="" type="search" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-owns="id-75d820c7-popup" aria-controls="id-75d820c7-popup" aria-activedescendant="" aria-expanded="false" :aria-activedescendant="open && selectedId ? `id-75d820c7-result-${selectedId}` : ''" :aria-expanded="open" placeholder="Search..." class="search__input" autocorrect="off" autocapitalize="off" enterkeyhint="search" required="" x-model="term" x-init="$store.hotkeys.register(&#39;/&#39;, () =&gt; $el.focus())" @focus="open = true" @keydown="onKeyDown" @pageshow.window="term = $el.value" lang="en">
      
        <kbd class="search__kbd" aria-hidden="true">/</kbd>
        <span class="visually-hidden" lang="en">
          Press &quot;/&quot; to activate search
        </span>
      
    </div>
    <template x-if="open">
      <div class="search__popover" id="id-75d820c7-popup">
        <div x-show="!term" class="search__info" lang="en">
          Search by title, content and #tags
        </div>
        <div x-show="!!term && results && !results.length" class="search__info" lang="en">
          Nothing found, try a different search term.
        </div>
        <div x-show="!!term && !results" class="search__info" lang="en">
          Searching...
        </div>

        <ul x-show="term && results && results.length" class="search__results" role="listbox" aria-label="Search Results">
          <template x-if="term && results && results.length">
            <template x-for="(result, index) in results" :key="result.id">
              <li role="option" :id="`id-75d820c7-result-${result.id}`">
                <a :href="result.url" class="search__result" :aria-selected="result.id === selectedId" x-effect="result.id === selectedId && $el.scrollIntoView({ block: 'nearest' })" :data-first="index == 0">
                  <span class="search__note-title" x-text="result.title"></span>
                  <span class="search__note-content" x-html="result.excerpt"></span>
                  <span class="search__selected-icon" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
                  </span>
                </a>
              </li>
            </template>
          </template>
        </ul>
      </div>
    </template>
  </div>


  </div>

  <div class="hide-md">
    <a href="/mcp-hko/search/" class="icon-btn" lang="en">
  <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
  <span class="visually-hidden">Search</span>
</a>

  </div>
  

<div role="radiogroup" aria-label="Appearance" class="theme-switcher" x-data="" x-cloak="" lang="en">
  <input id="id-acf7a008-light" type="radio" name="appearance" x-model="$store.appearance.theme" value="light" class="visually-hidden">
  <label for="id-acf7a008-light" class="theme-switcher__label" aria-label="Light">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
  </label>

  <input id="id-acf7a008-dark" type="radio" name="appearance" x-model="$store.appearance.theme" value="dark" class="visually-hidden">
  <label for="id-acf7a008-dark" class="theme-switcher__label" aria-label="Dark">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>
  </label>

  <input id="id-acf7a008-system" type="radio" name="appearance" x-model="$store.appearance.theme" value="system" class="visually-hidden">
  <label for="id-acf7a008-system" class="theme-switcher__label" aria-label="System">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg>
  </label>
</div>

</header>

      <div class="app-layout__wrapper">
        <div class="app-layout__sidebar" x-data="scrollContainer('app:sidebar')" x-bind="container" :data-open="$store.nav.open.toString()">
          <div class="app-layout__sidebar-inner">
            

<aside>
  <h2 class="visually-hidden" lang="en">Navigation</h2>

  <nav aria-labelledby="app:sidebar:nav" class="nav-section">
    <h3 id="app:sidebar:nav" class="visually-hidden" lang="en">Main</h3>
    <ul class="nav-list" role="list" aria-labelledby="app:sidebar:nav">
      <li>
        <a href="/mcp-hko/" class="nav-list__link">
          <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
          
          
          <span>Home</span>
        </a>
      </li>
      
        <li>
          <a href="/mcp-hko/tags/" class="nav-list__link" lang="en">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>Tags</span>
          </a>
        </li>
      
      <li>
        <a href="/mcp-hko/search/" class="nav-list__link" lang="en">
          <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
          <span>Search</span>
        </a>
      </li>
    </ul>
  </nav>

  
    <nav aria-labelledby="app:sidebar:section:links" class="nav-section nav-section--continued">
      <h3 id="app:sidebar:section:links" class="visually-hidden" lang="en">
        Links
      </h3>
      <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:links">
        
          <li>
            <a href="https://github.com/rothsandro/eleventy-notes" target="&quot;_blank&quot;" rel="&quot;noopener&quot;" class="nav-list__link">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
              <span>GitHub / Support</span>
            </a>
          </li>
        
          <li>
            <a href="https://www.buymeacoffee.com/sandroroth" target="&quot;_blank&quot;" rel="&quot;noopener&quot;" class="nav-list__link">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2"></path><path d="M14 2v2"></path><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"></path><path d="M6 2v2"></path></svg>
              <span>Buy me a coffee</span>
            </a>
          </li>
        
      </ul>
    </nav>
  

  <template x-if="$store.bookmarks.items.length">
    <nav aria-labelledby="app:sidebar:section:bookmarks" class="nav-section" x-cloak="">
      <h3 id="app:sidebar:section:bookmarks" class="nav-section__title" lang="en">
        Bookmarks
      </h3>
      <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:bookmarks">
        <template x-for="bkm in $store.bookmarks.items">
          <li>
            <a :href="bkm" class="nav-list__link">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
              <span x-text="$store.bookmarks.index[bkm] || bkm"></span>
            </a>
          </li>
        </template>
      </ul>
    </nav>
  </template>

  
    
      <nav aria-labelledby="app:sidebar:section:1" class="nav-section">
        <h3 id="app:sidebar:section:1" class="nav-section__title">Introduction</h3>
        
          <div class="nav-group" data-expanded="true">
            
            <div id="app:sidebar:section:1:group:0:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:1:group:0:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/getting-started/" class="nav-list__link">
              <span>Getting started</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/your-first-note/" class="nav-list__link">
              <span>Your first note</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/next-steps/" class="nav-list__link">
              <span>Next Steps</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

            </div>
          </div>
        
      </nav>
    
      <nav aria-labelledby="app:sidebar:section:6" class="nav-section">
        <h3 id="app:sidebar:section:6" class="nav-section__title">Guides</h3>
        
          <div class="nav-group" x-data="collapsible('app:sidebar:section:6:group:2:list', true)" :data-expanded="expanded" data-expanded="true">
            
              <h4 class="nav-group__title" id="app:sidebar:section:6:group:2:title">
                <button type="button" class="nav-group__toggle" aria-controls="app:sidebar:section:6:group:2:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                  <span>Writing Notes</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                </button>
              </h4>
            
            <div x-show="expanded" id="app:sidebar:section:6:group:2:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:2:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/writing-notes/" class="nav-list__link">
              <span>Writing Notes</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/start-page/" class="nav-list__link">
              <span>Start page</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/wikilinks/" class="nav-list__link">
              <span>Wikilinks</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/markdown/" class="nav-list__link">
              <span>Markdown</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/callouts/" class="nav-list__link">
              <span>Callouts</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/custom-properties/" class="nav-list__link">
              <span>Custom Properties</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li x-data="collapsible('app:sidebar:section:6:group:2:tree:dynamic-content', true)">
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/dynamic-content/" class="nav-list__link">
              <span>Dynamic Content</span>
            </a>
            
              <button type="button" class="nav-list__link nav-list__toggle" aria-controls="app:sidebar:section:6:group:2:tree:dynamic-content:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                <span class="visually-hidden">
                  Toggle Dynamic Content
                </span>
              </button>
            
          </div>
        

        
          <div x-show="expanded" id="app:sidebar:section:6:group:2:tree:dynamic-content:list">
            
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:2:title" style="--nav-list-level:1">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/dynamic-content/collections/" class="nav-list__link">
              <span>Collections</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/dynamic-content/queries/" class="nav-list__link">
              <span>Queries</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/writing/dynamic-content/render-filters/" class="nav-list__link">
              <span>Render Filters</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

          </div>
        
      </li>
    
  </ul>

            </div>
          </div>
        
          <div class="nav-group" x-data="collapsible('app:sidebar:section:6:group:3:list', true)" :data-expanded="expanded" data-expanded="true">
            
              <h4 class="nav-group__title" id="app:sidebar:section:6:group:3:title">
                <button type="button" class="nav-group__toggle" aria-controls="app:sidebar:section:6:group:3:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                  <span>Organizing Notes</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                </button>
              </h4>
            
            <div x-show="expanded" id="app:sidebar:section:6:group:3:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:3:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/organizing/files-and-folders/" class="nav-list__link">
              <span>Files and Folders</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/organizing/tags/" class="nav-list__link">
              <span>Tags</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

            </div>
          </div>
        
          <div class="nav-group" x-data="collapsible('app:sidebar:section:6:group:4:list', true)" :data-expanded="expanded" data-expanded="true">
            
              <h4 class="nav-group__title" id="app:sidebar:section:6:group:4:title">
                <button type="button" class="nav-group__toggle" aria-controls="app:sidebar:section:6:group:4:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                  <span>Core Features</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                </button>
              </h4>
            
            <div x-show="expanded" id="app:sidebar:section:6:group:4:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:4:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/configuration-file/" class="nav-list__link">
              <span>Configuration file</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/search/" class="nav-list__link">
              <span>Search</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/themes/" class="nav-list__link">
              <span>Themes</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/styling/" class="nav-list__link">
              <span>Styling</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/static-assets/" class="nav-list__link">
              <span>Static Assets</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/language/" class="nav-list__link">
              <span>Language</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/bookmarks/" class="nav-list__link">
              <span>Bookmarks</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/page-navigation/" class="nav-list__link">
              <span>Page Navigation</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li x-data="collapsible('app:sidebar:section:6:group:4:tree:panel', true)">
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/panel/" class="nav-list__link">
              <span>Panel</span>
            </a>
            
              <button type="button" class="nav-list__link nav-list__toggle" aria-controls="app:sidebar:section:6:group:4:tree:panel:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                <span class="visually-hidden">
                  Toggle Panel
                </span>
              </button>
            
          </div>
        

        
          <div x-show="expanded" id="app:sidebar:section:6:group:4:tree:panel:list">
            
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:4:title" style="--nav-list-level:1">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/panel/edit-link/" class="nav-list__link">
              <span>Edit link</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

          </div>
        
      </li>
    
      <li x-data="collapsible('app:sidebar:section:6:group:4:tree:sidebar', true)">
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/sidebar/" class="nav-list__link">
              <span>Sidebar</span>
            </a>
            
              <button type="button" class="nav-list__link nav-list__toggle" aria-controls="app:sidebar:section:6:group:4:tree:sidebar:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                <span class="visually-hidden">
                  Toggle Sidebar
                </span>
              </button>
            
          </div>
        

        
          <div x-show="expanded" id="app:sidebar:section:6:group:4:tree:sidebar:list">
            
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:4:title" style="--nav-list-level:1">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/sidebar/additional-links/" class="nav-list__link">
              <span>Additional Links</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/features/sidebar/notes/" class="nav-list__link">
              <span>Notes</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

          </div>
        
      </li>
    
  </ul>

            </div>
          </div>
        
          <div class="nav-group" x-data="collapsible('app:sidebar:section:6:group:5:list', true)" :data-expanded="expanded" data-expanded="true">
            
              <h4 class="nav-group__title" id="app:sidebar:section:6:group:5:title">
                <button type="button" class="nav-group__toggle" aria-controls="app:sidebar:section:6:group:5:list" aria-expanded="true" :aria-expanded="expanded" @click="toggle()">
                  <span>Deployment</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
                </button>
              </h4>
            
            <div x-show="expanded" id="app:sidebar:section:6:group:5:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:6:group:5:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/deployment/build/" class="nav-list__link">
              <span>Build</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/deployment/netlify/" class="nav-list__link">
              <span>Netlify</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/deployment/cloudflare-pages/" class="nav-list__link">
              <span>Cloudflare Pages</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/deployment/gitlab-pages/" class="nav-list__link">
              <span>GitLab Pages</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/deployment/github-pages/" aria-current="page" class="nav-list__link">
              <span>GitHub Pages</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

            </div>
          </div>
        
      </nav>
    
      <nav aria-labelledby="app:sidebar:section:8" class="nav-section">
        <h3 id="app:sidebar:section:8" class="nav-section__title">Releases</h3>
        
          <div class="nav-group" data-expanded="true">
            
            <div id="app:sidebar:section:8:group:7:list">
              
  <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:8:group:7:title" style="--nav-list-level:0">
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/releases/changelog/" class="nav-list__link">
              <span>Changelog</span>
            </a>
            
          </div>
        

        
      </li>
    
      <li>
        
          <div class="nav-list__link-with-toggle">
            <a href="/mcp-hko/n/releases/updating/" class="nav-list__link">
              <span>Updating</span>
            </a>
            
          </div>
        

        
      </li>
    
  </ul>

            </div>
          </div>
        
      </nav>
    
  

  
    <nav aria-labelledby="app:sidebar:section:tags" class="nav-section">
      <h3 id="app:sidebar:section:tags" class="nav-section__title" lang="en">
        Tags
      </h3>
      <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:tags">
        
        <li>
          <a href="/mcp-hko/tags/basics/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>basics</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/deployment/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>deployment</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/dynamic-content/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>dynamic content</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/feature/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>feature</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/organizing/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>organizing</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/release/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>release</span>
          </a>
        </li>
        
        <li>
          <a href="/mcp-hko/tags/writing/" class="nav-list__link">
            
      <svg width="1.125em" height="1.125em">
        <use xlink:href="#icon-hash"></use>
      </svg>
    
            <span>writing</span>
          </a>
        </li>
        
      </ul>
    </nav>
  
</aside>

          </div>
        </div>
        <div>
<div class="page" data-pagefind-body="">
  <main class="page__main" id="app-content">
    <article>
      <h1 class="page__title">GitHub Pages</h1>
      <div class="article">
        <p>You can build and deploy your notes using <a href="https://pages.github.com/">GitHub Pages</a>. GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub. Add your workflow file <code>.github/workflows/gh-pages.yml</code> and push it to your remote <code>main</code> branch.</p>
<h2 id="gh-pages" tabindex="-1">gh-pages <a class="anchor-link" href="#gh-pages" aria-hidden="true"><svg><use xlink:href="#icon-anchor-link"></use></svg></a></h2>
<p>Add the following to <code>.github/workflows/gh-pages.yml</code> to enable deployment to GitHub pages.</p>

        <div class="code-block">
          <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy to GitHub Pages (npm)

<span class="token key atrule">on</span><span class="token punctuation">:</span>
  <span class="token key atrule">workflow_dispatch</span><span class="token punctuation">:</span>
  <span class="token key atrule">push</span><span class="token punctuation">:</span>
    <span class="token key atrule">branches</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> main

<span class="token key atrule">permissions</span><span class="token punctuation">:</span>
  <span class="token key atrule">contents</span><span class="token punctuation">:</span> read
  <span class="token key atrule">pages</span><span class="token punctuation">:</span> write
  <span class="token key atrule">id-token</span><span class="token punctuation">:</span> write

<span class="token key atrule">concurrency</span><span class="token punctuation">:</span>
  <span class="token key atrule">group</span><span class="token punctuation">:</span> <span class="token string">"pages"</span>
  <span class="token key atrule">cancel-in-progress</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>

<span class="token comment"># Needed to deploy to GitHub pages subdomain. (E.g. `your-username.github.io/eleventy-notes/`)</span>
<span class="token key atrule">env</span><span class="token punctuation">:</span>
  <span class="token key atrule">ELEVENTY_NOTES_PATH_PREFIX</span><span class="token punctuation">:</span> <span class="token string">"eleventy-notes"</span>

<span class="token key atrule">jobs</span><span class="token punctuation">:</span>
  <span class="token key atrule">setup</span><span class="token punctuation">:</span>
    <span class="token key atrule">name</span><span class="token punctuation">:</span> Setup and Build
    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest
    <span class="token key atrule">steps</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v4
        <span class="token key atrule">name</span><span class="token punctuation">:</span> Checkout
      <span class="token punctuation">-</span> <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/setup<span class="token punctuation">-</span>node@v4
        <span class="token key atrule">name</span><span class="token punctuation">:</span> Setup Node
        <span class="token key atrule">with</span><span class="token punctuation">:</span>
          <span class="token key atrule">node-version</span><span class="token punctuation">:</span> <span class="token number">20</span>
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install dependencies
        <span class="token key atrule">run</span><span class="token punctuation">:</span> npm install <span class="token punctuation">-</span><span class="token punctuation">-</span>prefix .app
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Build
        <span class="token key atrule">run</span><span class="token punctuation">:</span> npm run build <span class="token punctuation">-</span><span class="token punctuation">-</span>prefix .app
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Upload artifact
        <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/upload<span class="token punctuation">-</span>pages<span class="token punctuation">-</span>artifact@v3
        <span class="token key atrule">with</span><span class="token punctuation">:</span>
          <span class="token key atrule">path</span><span class="token punctuation">:</span> .app/dist

  <span class="token key atrule">deploy</span><span class="token punctuation">:</span>
    <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy
    <span class="token key atrule">needs</span><span class="token punctuation">:</span> setup
    <span class="token key atrule">environment</span><span class="token punctuation">:</span>
      <span class="token key atrule">name</span><span class="token punctuation">:</span> github<span class="token punctuation">-</span>pages
      <span class="token key atrule">url</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span> steps.deployment.outputs.page_url <span class="token punctuation">}</span><span class="token punctuation">}</span>
    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest
    <span class="token key atrule">steps</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy to GitHub Pages
        <span class="token key atrule">id</span><span class="token punctuation">:</span> deployment
        <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/deploy<span class="token punctuation">-</span>pages@v4</code></pre>

          <button title="Copy to clipboard" aria-label="Copy to clipboard" class="code-block__copy" x-cloak="" x-data="copyToClipboard()" x-bind="copyBtn" lang="en">
            <svg x-show="!copied">
              <use xlink:href="#icon-copy"></use>
            </svg>
            <svg x-show="copied">
              <use xlink:href="#icon-check"></use>
            </svg>
          </button>
        </div>
      
      </div>
    </article>

    <div class="page__nav">
      

  <div class="page-nav">
    
      <a href="/mcp-hko/n/deployment/gitlab-pages/" class="page-nav__link" data-type="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="page-nav__icon"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
        <span class="page-nav__type" en="">Previous</span>
        <span class="page-nav__label">GitLab Pages</span>
      </a>
    
    
      <a href="/mcp-hko/n/releases/changelog/" class="page-nav__link" data-type="next">
        <span class="page-nav__type" en="">Next</span>
        <span class="page-nav__label">Changelog</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="page-nav__icon"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </a>
    
  </div>


    </div>
  </main>

  
  <div class="page__panel">
    


<aside class="stack" data-stack="6">
  
  
  <div class="toc" data-pagefind-ignore="" x-data="toc" x-on:scroll.window.throttle.30ms="onScroll()" :style="indicatorStyles">
    <h2 class="toc__label" id="app-panel-toc" lang="en">
      On this page
    </h2>
    <ul class="toc__list" role="list" aria-labelledby="app-panel-toc">
      
      <li style="--level: 1" class="toc__item">
        <a href="#gh-pages" class="toc__link" :data-active="'gh-pages' === activeId" @click="onNavigate('gh-pages')">
          gh-pages 
        </a>
      </li>
      
    </ul>
  </div>
  

  
  

  
  <div class="grouped-links">
    <h2 class="grouped-links__label" id="app-panel-tags" lang="en">
      Tags
    </h2>
    <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-tags">
      
      
      <li>
        <a href="/mcp-hko/tags/deployment/" class="grouped-links__link" data-pagefind-filter="tags:deployment">
          
      <svg>
        <use xlink:href="#icon-hash"></use>
      </svg>
    
          <span>deployment</span>
        </a>
      </li>
      
    </ul>
  </div>
  

  
  
  <div class="grouped-links" data-pagefind-ignore="">
    <h2 class="grouped-links__label" id="app-panel-incoming" lang="en">
      Incoming
    </h2>
    <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-incoming">
      
        <li>
          <a href="/mcp-hko/n/deployment/build/" class="grouped-links__link">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
            <span>Build</span>
          </a>
        </li>
      
    </ul>
  </div>
  

  
  
  
  <div class="grouped-links" data-pagefind-ignore="">
    <h2 class="grouped-links__label" id="app-panel-external" lang="en">
      External
    </h2>
    <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-external">
      
        <li>
          <a href="https://pages.github.com/" class="grouped-links__link" target="_blank" rel="noopener noreferrer">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1="8" x2="16" y1="12" y2="12"></line></svg>
            <span>GitHub Pages</span>
          </a>
        </li>
      
    </ul>
  </div>
  

  <div class="inline" data-pagefind-ignore="">
    
  <button x-data="" x-cloak="" type="button" class="toggle-btn" :aria-pressed="$store.bookmarks.is('/mcp-hko/n/deployment/github-pages/')" @click="$store.bookmarks.toggle('/mcp-hko/n/deployment/github-pages/')" lang="en">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg>
    <span>Bookmark</span>
  </button>

    
  
    <a href="https://github.com/rothsandro/eleventy-notes/edit/main/Deployment/GitHub%20Pages.md" class="toggle-btn" lang="en">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg>
      <span>Edit</span>
    </a>
  

  </div>
</aside>

  </div>
  
</div>


</div>
      </div>
    </div>

    <script src="/mcp-hko/app.js" data-base="/mcp-hko/"></script>

    <div aria-hidden="true" hidden="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" id="icon-hash"><line x1="4" x2="20" y1="9" y2="9"></line><line x1="4" x2="20" y1="15" y2="15"></line><line x1="10" x2="8" y1="3" y2="21"></line><line x1="16" x2="14" y1="3" y2="21"></line></svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" id="icon-anchor-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" id="icon-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" id="icon-check"><path d="M20 6 9 17l-5-5"></path></svg>
    </div>
  </body>
</html>
